<template>
  <view class="feedback-card">
    <view class="user-info">
      <text class="username">{{ comment.nickname }}</text>
      <text class="timestamp">{{ formatDate(comment.create_date) }}</text>
    </view>
    <text class="content">{{ comment.content }}</text>
    <view class="actions">
      <view class="like-button" @click="toggleLike">
        <text :class="['like-icon', { 'liked': isLiked }]">{{ isLiked ? '❤️' : '🙂' }}</text>
        <text class="like-count">{{ likeCount }}</text>
      </view>
      <!-- 新增：管理员删除按钮 -->
      <view v-if="isPrivileged" class="delete-button" @click="deleteFeedback">
        <text class="delete-icon">🗑️</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "FeedbackCard",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isLiked: this.comment.is_liked,
      likeCount: this.comment.like_count,
    };
  },
  computed: {
    isPrivileged() {
      const privilege = uni.getStorageSync('privilege');
      return privilege === 1 || privilege === 2;
    },
  },
  methods: {
    toggleLike() {
      this.isLiked = !this.isLiked;
      this.likeCount += this.isLiked ? 1 : -1;
      this.$emit('like', this.comment.id);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString();
    },
    // 新增：删除反馈方法
    deleteFeedback() {
      if (!this.comment.id) {
        console.error("反馈 ID 不存在");
        return;
      }
      uni.showModal({
        title: "确认删除",
        content: "确定要删除该反馈吗？",
        success: (res) => {
          if (res.confirm) {
            this.$request({
              url: "/train/feedback/delete/",
              method: "POST",
              data: {
                feedback_id: this.comment.id,
              },
              success: (response) => {
                if (response.statusCode === 200) {
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                  });
                  // 触发删除事件，将评论 ID 传递给父组件
                  this.$emit("delete", this.comment.id);
                } else {
                  uni.showToast({
                    title: "删除失败",
                    icon: "none",
                  });
                }
              },
              fail: (error) => {
                console.error("删除请求失败", error);
                uni.showToast({
                  title: "删除失败",
                  icon: "none",
                });
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.feedback-card {
  padding: 16rpx;
  border-bottom: 1px solid #eee;
  margin-bottom: 16rpx;
  min-height: 100rpx;
  background-color: #fff;
}

.user-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.username {
  font-weight: bold;
  color: #333;
}

.timestamp {
  color: #999;
  font-size: 24rpx;
}

.content {
  margin-bottom: 16rpx;
  color: #333;
}

.actions {
  display: flex;
  align-items: center;
}

.like-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.like-icon {
  font-size: 32rpx;
  color: #ccc;
}

.liked {
  color: pink;
}

.like-count {
  margin-left: 8rpx;
  font-size: 24rpx;
  color: #999;
}

/* 新增：删除按钮样式 */
.delete-button {
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
}

.delete-icon {
  font-size: 36rpx;
  color: #ffffff;
}
</style>